/***
 * @Author:xxx
 * @Date:2020-08-10 14:58:18
 * @LastModifiedBy:xxx
 * @Last Modified time:2020-08-18 19:23:07
 */

import React, { PureComponent } from 'react';
import { Form, Input,Tree,Switch,Checkbox } from 'antd';
import PropTypes from 'prop-types';
import './modal.css';
import {adminMenuList} from '../../config/menuList';

const CheckboxGroup = Checkbox.Group;

const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];

class AuthRoleForm extends PureComponent {    // 如果子组件没有改变，那么将不render

  
  static propTypes = {
    role: PropTypes.object.isRequired,
  };
  
  constructor(props) {
    super(props);
    const {role_menu} = this.props.role
    this.state = {
      checkedKeys: role_menu,
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
    }
  };

  onChange1 = checkedList => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll: checkedList.length === plainOptions.length,
    });
  };

  onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };

  // 获取checkedkeys，为父组件提交获取的最新menus数据
  getMenus = () => this.state.checkedKeys;

  onCheck = (checkedKeys) => {
    console.log('onCheck', checkedKeys);
    this.setState({checkedKeys})
  };

  onChange = (checked) => {
    console.log(`switch to ${checked}`);
  }

  // 根据新传入的role来更新checkedkeys状态
  componentWillReceiveProps(nextProps) {   // 当组件接收到新的属性时自动调用，在render之前调用
    const menus = nextProps.role.role_menu;
    this.setState({
      checkedKeys: menus
    })
  }

  render() {
    const {role} = this.props;
    const {checkedKeys} = this.state;
    return (
      <div className="auth-role-form">
        <Form >  
          <Form.Item 
            label="角色名称" 
            rules={[{ required: true }]}
          >
            <Input value={role.role_name} disabled/>
          </Form.Item>
          <Form.Item 
            rules={[{ required: true }]}
          >
            <div className="role-title">
              
              <Checkbox
                indeterminate={this.state.indeterminate}
                onChange={this.onCheckAllChange}
                checked={this.state.checkAll}
              >
                全选
              </Checkbox>
              <span className="role-span">首页</span>
              <Switch className="role-switch" defaultChecked onChange={this.onChange} />
            </div> 
            <CheckboxGroup
              options={plainOptions}
              value={this.state.checkedList}
              onChange={this.onChange1}
            /> 
          </Form.Item>
        </Form>

        <Tree
          checkable
          //defaultExpandedKeys={['0-0-0', '0-0-1']}
          // defaultSelectedKeys={['0-0-0', '0-0-1']}
          checkedKeys={checkedKeys}  
          // onSelect={onSelect}
          onCheck={this.onCheck}
          treeData={adminMenuList}
        />
      </div>  
    )
  }
}

export default AuthRoleForm;